﻿
@{
    ViewBag.Title = "TestScroll";
}
<style type="text/css">
    .infinite-scroll-preloader {
        margin-top: -20px;
    }
</style>
<div class="page">
    <header class="bar bar-nav">
        <h1 class="title">infinite scroll</h1>
    </header>
    <!-- 添加 class infinite-scroll 和 data-distaance -->
    <div class="content infinite-scroll" data-distance="100">
        <div class="list-block">
            <ul class="list-container"></ul>
        </div>
        <!-- preloader -->
        <div class="infinite-scroll-preloader">
            <div class="preloader"></div>
        </div>
    </div>
</div>
<script type="text/javascript">

    $(function () {
        $.init();

        var loading = false;
        var maxItems = 100;

        var itemsPerLoad = 20;

        function addItems(number, lastIndex) {
            var html = '';
            for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
            }
            $('.list-container').append(html);

        }

        addItems(itemsPerLoad, 0);

        var lastIndex = 20;

        $(document).on('infinite', '.infinite-scroll', function () {

            // 如果正在加载，则退出
            if (loading) return;

            // 设置flag
            loading = true;

            setTimeout(function () {
                loading = false;

                if (lastIndex >= maxItems) {
                    $.detachInfiniteScroll($('.infinite-scroll'));
                    $('.infinite-scroll-preloader').remove();
                    return;
                }

                addItems(itemsPerLoad, lastIndex);
                lastIndex = $('.list-container li').length;
            }, 1000);
        });
       
    })
    
</script>
